<template>
    <div class="page">
        <div class="title-view">{{data.title}}</div>
        <div class="title-description">
            <span class="date">{{new Date(data.createtime).toAppTime()}}</span>
            <span class="name">{{data.createuser}}</span>
        </div>
        <div class="audio-box">
            <img class="btn-icon" src="../../assets/sound-play.svg">
            <div class="text-box">
                <div class="title">{{data.title && data.title.substring(0, 12)}}...</div>
                <div class="name">作者：{{data.createuser}}</div>
                <div class="line-box">
                    <van-progress :percentage="50" pivot-text=" " color="#09BB07"/>
                </div>
                <div class="time-box">
                    <span class="now">0:55</span>
                    <span class="all">08:30</span>
                </div>
            </div>
        </div>
        <div class="text-content-box">
            <div class="text-content" v-html="data.content"/>
            <div class="text-content" style="visibility: hidden" v-html="data.content"/>
        </div>
        <min-title-bar title="热门评论"/>
        <user-comment v-for="(item, key) in comment" :key="'comment' + key" :data="item"/>
        <see-more-btn/>
        <min-title-bar title="资讯推荐"/>
        <news-right-icon v-for="(item, key) in news" :key="key" :data="item"/>
        <see-more-btn/>
        <release-comment/>
    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .page{
        border-bottom: .8rem solid @color-bg-gray;
        margin-bottom: 5rem;

        .title-view{
            padding: 1.5rem;
            font-size: 2.2rem;
            line-height: 2.9rem;
            font-weight: bold;
        }
        .title-description{
            font-size: 1.3rem;
            line-height: 1.9rem;
            padding: 0 1.5rem;
            .name{
                float: right;
            }
        }
        .audio-box{
            height: 9rem;
            margin: 1.5rem;
            display: flex;
            align-items: center;
            background-color: @color-bg-light-gray;
            border-radius: .2rem;
            border: 1px solid @color-line-gray;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            .btn-icon{
                height: 3.3rem;
                margin-right: .8rem;
            }
            .text-box{
                flex: 1;
                .title{
                    font-size: 1.5rem;
                    line-height: 2.1rem;
                }
                .name{
                    font-size: 1.2rem;
                    line-height: 1.7rem;
                    margin-top: .5rem;
                }
                .line-box{
                    height: .8rem;
                    margin-top: 1.1rem;
                }

                .time-box{
                    color: @color-text-gray;
                    .all{
                        float: right;
                    }
                }
            }
        }

        .text-content-box{
            overflow: hidden;
        }

        .text-content{
            padding: 0 .5rem;
            text-align: justify;
            box-sizing: border-box;
            width: 50%;
            overflow: hidden;
            transform-origin: 0 0;
            transform: scale(2);
        }
    }
</style>
<style lang="less">
    .van-progress__pivot{
        padding: 0;
        width: .8rem;
        height: .8rem;
        display: block;
        min-width: 0;
    }
</style>

<script>

    import {study} from 'api'

    export default {
        data(){
            const comment = Array(2).fill({
                src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1958966202,1289193182&fm=27&gp=0.jpg',
                name: '中国证券报',
                date: '2018.03.01 18:22',
                content: '日本总务省周五公布的数据显示，1月份失业率降至为1993年4月份以来最低水平'
            });
            const news = Array(4).fill({
                title: '日本总务省周五公布的数据显示，1月份失业率降至为1993年4月份以来最低水平',
                date: '2018.03.01 18:22',
                src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1958966202,1289193182&fm=27&gp=0.jpg',
            });
            return {
                comment,
                news,
                data: ''
            }
        },
        created(){
            this.$store.commit('hideNav', true);
            this.$axios.get(study.API_INFORMATION_DETAIL, {
                params: {
                    id: this.$route.params.id,
                    userNo: null
                }
            }).then(({data})=>{
                this.data = data;
            })
        }
    }
</script>